import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({ selector: '[guideHighlight]' })
export class HighlightDirective {
    private color = 'red';
    @Input() guideHighlight: string;

    @Input() set defaultColor(colorName: string) {
        this.color = colorName || this.color;
    }
    // constructor(el: ElementRef, renderer: Renderer) {
    //     renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
    // }
    constructor(private el: ElementRef, private renderer: Renderer) { }


    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.guideHighlight || this.color);
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }
    private highlight(color: string) {
        this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
    }
}
